<template>
  <div>
    <div style="margin: 10px 0;">
      <el-row type="flex" class="row-search" >
        <el-col :span="2"><el-button @click="toggleSelection()" style="margin-left: 10px;">取消全选</el-button></el-col>
        <el-col :span="4"><el-input v-model="name" style="float:left; margin-left: 10px;  width: 200px;" suffix-icon="el-icon-search" placeholder="请输入设备id："></el-input></el-col>
        <el-col :span="2"><el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="load">搜索</el-button></el-col>
        <el-col :span="1"><el-button type="warning"  icon="el-icon-search" @click="reset">重置</el-button></el-col>
      </el-row>
    </div>

    <div style="margin: 10px 0; ">
      <el-row type="flex" class="row-update" >
        <el-col :span="2"><el-button type="success"  size="medium" style=" margin: 10px;" icon="el-icon-circle-plus-outline" @click="addMenu">新增</el-button></el-col>
        <el-popconfirm
            style="margin-left: 5px;"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="您确定执行批量删除吗？"
            @confirm="bathDel()"
        >
          <el-button slot="reference" type="danger"   size="medium" style="margin: 10px;" icon="el-icon-delete" > 批量删除</el-button>
        </el-popconfirm>
        <el-col :span="2">
          <!--          <el-upload>
                      <el-button action='http://localhost:9090/user/import'  type="primary"  size="medium" style="margin: 10px;" icon="el-icon-bottom"> 导入</el-button>
                    </el-upload>-->
        </el-col>
        <!--        <el-col :span="2"><el-button type="primary"  size="medium" style="margin: 10px;" icon="el-icon-top" @click="exp"> 导出</el-button></el-col>-->
      </el-row>
    </div>

    <el-table
        :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="{ textAlign: 'center', verticalAlign: 'middle' }"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="设备id" width="80px;" show-overflow-tooltip/>
      <el-table-column prop="name" label="设备名称"  show-overflow-tooltip/>
      <el-table-column prop="num" label="设备编号  "  show-overflow-tooltip/>
      <el-table-column prop="bstatus" label="设备借阅情况" />
      <el-table-column prop="borrowStatus" label="设备借阅情况" />
      <el-table-column prop="typeId" label="种类编号" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="delFlag" label="删除标志" />
      <el-table-column label="操作" width="400" align="center">
        <template slot-scope="scope">

          <el-button type="Info" @click="handleBorrow(scope.row)"  size="mini">借阅</el-button>
          <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">修改</el-button>
          <el-popconfirm
              style="margin-left: 5px;"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该条消息吗？"
              @confirm="handleDel(scope.row.id)"
          >
            <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="修改设备" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px">
        <el-form-item label="设备id" >
          <el-input v-model="form.id" autocomplete="off" :disabled="isRead"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" >
          <el-input v-model="form.name" autocomplete="off" :disabled="isRead"></el-input>
        </el-form-item>
        <el-form-item label="种类" >
          <el-select clearable v-model="form.typeId" placeholder="请选择" :disabled="isRead">
            <el-option
                v-for="item in types"
                :key="item.typeName"
                :label="item.typeId"
                :value="item.typeId">
              <span style="float: left">{{ item.typeId }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号" >
          <el-input v-model="form.num" autocomplete="off" :disabled="isRead"></el-input>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12"><el-button @click="dialogFormVisible = false">取 消</el-button></el-col>
          <el-col :span="6"><el-button type="primary" @click="save">确 定</el-button></el-col>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog title="新增设备" :visible.sync="addFormVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="设备名称" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" >
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="种类" >
          <el-select clearable v-model="form.typeId" placeholder="请选择" >
            <el-option
                v-for="item in types"
                :key="item.typeName"
                :label="item.typeId"
                :value="item.typeId">
              <span style="float: left">{{ item.typeId }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="设备使用登记" :visible.sync="addUserVisible" width="30%" >
      <el-form label-width="70px" >
<!--        <el-form-item label="设备id" >
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>-->
        <el-form-item label="设备名称" >
          <el-input v-model="form.name" autocomplete="off" :disabled="isRead"></el-input>
        </el-form-item>
        <el-form-item label="借阅人" >
          <el-select clearable v-model="form.userId" placeholder="请选择" :disabled="isRead">
            <el-option
                v-for="item in users"
                :key="item.userName"
                :label="item.id"
                :value="item.id">
              <span style="float: left">{{ item.id }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Device",
  data(){
    return{

      name:'',
      /*typeId: '',*/
      did: '',
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 3,
      userName: '',
      multipleSelection: [],
      collapseBtnClass: 'el-icon-s-unfold',
      input: '',
      dialogFormVisible: false,
      addFormVisible:false,
      addUserVisible:false,
      form: {},
      formLabelWidth: '60px',
      users:[],
      types:[],
      isRead:false,
      bstatus:'',

    }
  },
  created() {
    this.load()
  },
  methods:{
    //添加人员弹窗
    handleBorrow(row){
      console.log(">>>>>>>>>>>>>>>>"+row.bstatus)

      this.form = row
      if (row.bstatus === 1){
        this.isRead = true
      }else{
        this.isRead = false
      }
      this.addUserVisible = true
    },

    //新增页面展示
    addMenu(){

      this.addFormVisible =true
      this.form = {}
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    load(){
      this.request.get("/device/page",{
        params: {
          pageNum:  this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res => {
        /*console.log(res)*/
        this.tableData = res.data
        if(res.data.bstatus === 1){
          this.isRead = true
        }else {
          this.isRead = false
        }
        this.total = res.data.total
      })

      this.request.get("/device/total").then(res => {
        console.log(res)
        this.total = res.data
      })

      this.request.get("/device/type/list").then(res => {
        this.types = res.data
      })

      this.request.get("/device/user/list").then(res => {
        this.users = res.data
      })

    },
    reset(){
      //重置搜索框
      this.name = ""
      this.load()

    },
    handleAdd(){
      //新增
      this.dialogFormVisible = true
      this.form = {}
    },

    saveUser(){
      this.request.post("/project-device/save",this.form)
          .then(res => {
            //若果返回结果为true
            if(res.code === '200'){
              this.$message.success("保存成功")
              this.addUserVisible = false
              this.load()

            }else {
              this.$message.error("保存失败")
            }
          })
    },
    //保存
    save(){
      this.request.post("/device/save",this.form)
          .then(res => {
            //若果返回结果为true
            if(res.data){
              this.$message.success("保存成功")
              this.dialogFormVisible = false
              this.addFormVisible=false
              this.load()

            }else {
              this.$message.error("保存失败")
            }
          })
    },
    //编辑
    handleEdit(row){
      this.form = row
      if (row.bstatus === 1){
        this.isRead = true
      }else{
        this.isRead = false
      }
      this.dialogFormVisible = true
    },
    handleDel(id){
      this.request.delete('/device/' + id).then(res => {
        if(res.code === '200'){
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      /*console.log(this.multipleSelection)*/
      this.multipleSelection = val
    },
    //批量删除
    bathDel(){
      //map键值对绑定multipleSelection中的id值  [{},{},{}] => [multipleItem.1.id,..2.id,..3.id,..4]
      let ids = this.multipleSelection.map(v => v.id)
      this.request.post("/device/bath/del",ids).then(res => {
        if(res.code === '200'){
          this.$message.success("批量删除成功")
          this.load()
        }else {
          this.$message.error("批量删除失败")
        }
      })
      /*console.log(ids)*/
    },

    handleSizeChange(pageSize){
      this.pageSize = pageSize
      /*console.log(pageSize)*/
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      /*console.log(pageNum)*/
      this.load()
    },
    /*exp() {
      window.open("http://localhost:9090/user/export")
    }*/
  }

}
</script>

<style scoped>
.el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.selectWidth{
  width: 100% !important;
}
</style>